<template>
  <div>
    <div class="detail-info" style="margin-top: 50px">
      <div class="form-item">
        <h4>基本信息</h4>
        <el-form :model="infoForm"  label-width="180px">
          <el-form-item label="分公司" v-if="isBranch" required>
            <el-select v-model="infoForm.branchId" style="width: 220px" filterable>
              <el-option
                v-for="(item, index) in branchList"
                :label="item.branch_Name"
                :value="item.branch_Id"
                :key="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分公司" v-else>
            <el-input v-model="this.branchName" style="width: 220px" disabled></el-input>
          </el-form-item>
          <el-form-item label="页面类型" required>
            <el-select v-model="infoForm.view" @change="viewChange" filterable>
              <el-option
                v-for="(item, index) in infoForm.viewList"
                :label="item.name"
                :value="item.id"
                :key="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模块名称" required>
            <el-input v-model="infoForm.name" style="width: 220px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-item">
        <h4>上线信息</h4>
        <el-form :model="lineForm"  label-width="180px">
          <el-form-item label="客资类型" required>
            <el-select v-model="lineForm.client" multiple>
              <el-option
                v-for="(item, index) in lineForm.clientList"
                :label="item.name"
                :value="item.id"
                :key="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上线类型" required>
            <el-select v-model="lineForm.onlineMode" placeholder="请选择" @change="change">
              <el-option label="审核通过后启用" value="1"></el-option>
              <el-option v-show="dingshi" label="定时启用" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="定时时间" v-show="lineForm.onlineMode === '2'" required>
            <el-date-picker
              @change="timeChange"
              v-model="lineForm.onlineTime"
              type="datetime"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd-HH-mm-ss"
              style="width: 220px"
              placeholder="选择时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="上线说明">
            <el-input  type="textarea" v-model="lineForm.onlineComment" style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-item">
        <h4>模版信息</h4>
        <el-form :model="templateForm" label-width="180px">
          <el-form-item label="模版标识">
            <el-input v-model="templateForm.mark" style="width: 300px" disabled></el-input>
          </el-form-item>
          <el-form-item label="模版名称">
            <el-input v-model="templateForm.name" style="width: 300px" disabled></el-input>
          </el-form-item>
          <el-form-item label="模板图片">
            <div class="pic">
              <img v-if="this.templateForm.src !== ''" :src="this.imgHost + '/' + templateForm.src" style="width:100%; height:100%;" alt="">
              <img v-else style="width:100%; height:100%;" alt="">
            </div>
          </el-form-item>
          <el-form-item label="">
            <el-button @click="checkTemplate" type="primary" icon="search">选择模板</el-button>
          </el-form-item>
          <el-form-item label="标题类别" v-if="this.templateForm.mark === 'HMC052'">
            <el-radio-group v-model="titleType">
              <el-radio :label="1">厂商周</el-radio>
              <el-radio :label="2">品牌/品类</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="模块类别" v-if="this.templateForm.mark === 'HMC065' || this.templateForm.mark === 'HMC023' || this.templateForm.mark === 'HMC066' || this.templateForm.mark === 'HMC038'
          || this.templateForm.mark === 'HMC054' || this.templateForm.mark === 'HMC013' || this.templateForm.mark === 'HMC011' || this.templateForm.mark === 'HMC012'
          || this.templateForm.mark === 'HMC02' || this.templateForm.mark === 'HMC03' || this.templateForm.mark === 'HMC037' || this.templateForm.mark === 'HMC047'
          || this.templateForm.mark === 'HMC052' && this.titleType === 2">
            <el-radio-group v-model="modelType">
              <el-radio :label="1">品牌</el-radio>
              <el-radio :label="2">品类</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标题名称" v-if="this.templateForm.mark === 'HMC052'">
            <el-input v-model="titleName" placeholder="请输入标题名称" style="width:200px" maxlength="8" @change="titleNameChange"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-item">
        <h4>模块配置</h4>
        <div>
          <el-button v-show="isAddModule" @click="addModule">添加模块</el-button>
        </div>
        <el-table
          :data="moduleTable.data"
          border
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            prop="sortId"
            align="center"
            width="50"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="comment"
            align="center"
            label="相关说明">
          </el-table-column>
          <el-table-column
            width="100"
            prop="contentId"
            align="center"
            label="关联内容ID">
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="内容名称">
          </el-table-column>
          <el-table-column
            prop="contentModeName"
            align="center"
            label="内容形式">
          </el-table-column>
          <el-table-column
            align="center"
            label="内容类型">
            <template scope="scope">
              <span v-if="scope.row.contentType === 1">内容</span>
              <span v-if="scope.row.contentType === 2">满减</span>
              <span v-if="scope.row.contentType === 3">满赠</span>
              <span v-if="scope.row.contentType === 4">普通套餐</span>
              <span v-if="scope.row.contentType === 5">限时抢购</span>
              <span v-if="scope.row.contentType === 6">1+n套餐</span>
              <span v-if="scope.row.contentType === 7">加价购</span>
              <span v-if="scope.row.contentType === 8">单品折扣</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="220"
            label="图片">
            <template scope="scope">
              <span v-if="scope.row.displayId === 0">无图</span>
              <el-upload
                v-else
                class="avatar-uploader"
                name="imageFile"
                :action="imgAddress"
                :show-file-list="false"
                :on-success="(res, file) => { return handleAvatarSuccess(res, file, scope, scope.$index)}">
                <img v-if="scope.row.image" :src="imgHost + '/' + scope.row.image" class="avatarCanvas">
                <i v-else class="el-icon-plus avatar-uploader-icon">添加图片</i>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            align="center"
            label="内容备注">
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="200px"
            align="center">
            <template scope="scope">
              <el-dropdown v-if="!scope.row.contentType" @command="command => { return handleCommand(command, scope.row, scope.$index)}">
                <el-button type="primary" size="small">
                  关联选择<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" class="menu">
                  <el-dropdown-item command="neirong">内容</el-dropdown-item>
                  <el-dropdown-item command="manjian">满减</el-dropdown-item>
                  <el-dropdown-item command="manzeng">满赠</el-dropdown-item>
                  <el-dropdown-item command="jiajiagou">加价购</el-dropdown-item>
                  <el-dropdown-item divided command="putongtc">普通套餐</el-dropdown-item>
                  <el-dropdown-item command="xianshiqianggou">限时抢购</el-dropdown-item>
                  <el-dropdown-item command="yijiaN">1+n套餐</el-dropdown-item>
                  <el-dropdown-item command="zhekou">单品折扣</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-button v-else @click="releCancel(scope.$index, scope.row)" type="primary" size="small">取消关联</el-button>
              <el-button v-if="(!scope.row.advertisementId && scope.row.contentType)" @click="releAdvert(scope.row, scope.$index)" type="primary" size="small">关联广告</el-button>
              <el-button v-show="scope.row.advertisementId" @click="AdvertDetail(scope.$index, scope.row)" type="primary" size="small">广告详情</el-button>
            </template>
          </el-table-column>
          <el-table-column v-if="this.templateForm.mark === 'HMC065' || this.templateForm.mark === 'HMC023' || this.templateForm.mark === 'HMC066' || this.templateForm.mark === 'HMC038'
          || this.templateForm.mark === 'HMC054' || this.templateForm.mark === 'HMC013' || this.templateForm.mark === 'HMC011' || this.templateForm.mark === 'HMC012'
          || this.templateForm.mark === 'HMC02' || this.templateForm.mark === 'HMC03' || this.templateForm.mark === 'HMC037' || this.templateForm.mark === 'HMC047'
          || this.templateForm.mark === 'HMC052'" label="预览" align="center" width="100px">
            <template scope="scope">
              <el-button type="primary" @click="preview('标题', scope)">预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <img-canvas></img-canvas> -->
    </div>
    <!--按钮组-->
    <div style="margin: 20px auto 80px; width: 30%; overflow: hidden">
      <el-button @click="submit($event)" type="success">提交</el-button>
      <el-button v-show="isDraft" @click="submit($event)" type="warning">暂存</el-button>
      <el-button @click="cancel" type="danger">取消</el-button>
    </div>
    <!--选择模板弹窗-->
    <el-dialog class="dialog" title="模板选择" :visible.sync="dialogTemplate" width="70%">
      <el-table
        :data="templateTable.data"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="name"
          label="模板名称"
          align="center"
          width="300">
        </el-table-column>
        <el-table-column
          prop="contentNum"
          label="模块个数"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          label="图片"
          min-width="200">
          <template scope="scope">
            <img :src="imgHost + '/' + scope.row.image" style="width:160px;height:100px;margin:5px 0" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="">
          <template scope="scope">
            <el-button @click="add(scope.$index, scope.row)" size="small">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange_T"
        :page-size="Number(templateTable.pageSize)"
        layout="total, prev, pager, next"
        :total="Number(templateTable.total)"
        style="padding-top:10px;text-align: right;">
      </el-pagination>
    </el-dialog>
    <!--关联选择公共弹窗-->
    <el-dialog class="dialog" title="选择" :visible.sync="dialogCommon">
      <el-form style="overflow: hidden; margin-top: 20px" :inline="true" :model="formCommon">
        <el-form-item label="ID">
          <el-input style="width: 120px" v-model="formCommon.ID" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input style="width: 200px" v-model="formCommon.name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 60px" @click="ListCommon">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="TableCommon.data"
        v-loading="commonLoading"
        height="200"
        tooltip-effect="dark"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="name"
          label="名称"
          align="center"
          width="300">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="comment"
          label="备注"
          align="center"
          width="300">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="">
          <template scope="scope">
            <el-button @click="add_C(scope.$index, scope.row, $event)" size="small">关 联</el-button>
            <!--<el-button v-show="scope.row.sign === 'cancel'" @click="add_C(scope.$index, scope.row, $event)" size="small">取消关联</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange_C"
        :page-size="TableCommon.pageSize"
        layout="total, prev, pager, next"
        :total="Number(TableCommon.total)"
        style="padding-top:10px;text-align: right;">
      </el-pagination>
    </el-dialog>
    <!--关联广告-->
    <el-dialog class="dialog" title="广告关联" :visible.sync="dialogAdvert">
      <el-table
        :data="TableAdvert.data"
        height="200"
        tooltip-effect="dark"
        border
        style="width: 100%">
        <el-table-column
          prop="actionname"
          label="跳转动作"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="cadName"
          label="广告名称"
          align="center"
          width="300">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="T_AdUrl"
          label="跳转详情"
          align="center"
          width="300">
        </el-table-column>
        <el-table-column
          label="广告图片"
          min-width="200">
          <template scope="scope">
            <img :src="imgHost + '/' + scope.row.adimage" style="width:160px;height:100px;margin:5px 0" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="">
          <template scope="scope">
            <el-button @click="add_A(scope.$index, scope.row, $event)" size="small">关 联</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange_A"
        :page-size="TableAdvert.pageSize"
        layout="total, prev, pager, next"
        :total="Number(TableAdvert.total)"
        style="padding-top:10px;text-align: right;">
      </el-pagination>
    </el-dialog>
    <!--广告详情-->
    <el-dialog title="关联广告详情" :visible.sync="detailDialog">
      <div class="shuoming">
          <pre style="margin-top: 10px">
          动作类型： {{ggData.actionName}}
          动作详情： {{ggData.actionDetail}}
          广告图片：<img :src="this.imgHost + '/' + ggData.image" alt="" width="50%" height="200px">
          </pre>
        <el-button type="primary" style="margin-right: 80%" @click="cancelAdvert">取消关联</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="canvasTitle" :visible.sync="canvasDialog" :width="canvasDialogWidth">
      <img-canvas ref="canvas" :canvasData="canvasData"></img-canvas>
      <span slot="footer" class="dialog-footer">
        <el-button @click="canvasDialog = false">取 消</el-button>
        <el-button v-if="showCreate" type="primary" @click="createdImg">确 定</el-button>
      </span>
    </el-dialog>
    <div style="font-family: 'dongqingheiti';opacity: 0;height:0">哈哈哈哈哈</div>
    <div style="font-family: 'weiruanyahei';opacity: 0;height:0">哈哈哈哈哈</div>
  </div>
</template>
<script>
  import { getInfo, column } from '../../../config/proxy.js'
  import Vue from 'vue'
  import { apiHost, apiURL } from '../../../config/settings.js'
  import imgCanvas from './canvas.vue'
  import mixins from '../../../components/mixins.vue'
  export default {
    mixins: [mixins],
    components: {
      imgCanvas
    },
    data () {
      return {
        dingshi: true,
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
//      图片地址
        imgHost: '',
        imgAddress: '',
        data: '',       // 编辑数据
        isDraft: true,  // 暂存按钮
//      基本信息
        infoForm: {
          branchId: '',
          view: '',
          name: '',
          viewList: []
        },
//      上线信息
        lineForm: {
          onlineMode: '1',
          onlineComment: '',
          onlineTime: '',
          client: '',
          clientList: []
        },
//      模板信息
        templateForm: {
          name: '',
          mark: '',
          src: '',
          id: ''
        },
//      模块配置
        sort: '',
        isAddModule: false,
        addId: '',
        moduleTable: {
          data: [],
          pageSize: 10,
          page: 1,
          total: ''
        },
        nowIndex: '',
        nowIndex2: '',
        nowIndex3: '',
        nowName: '',
        name: '',
        type: '',
        hdType: '',
        ggData: {}, // 广告详情
//      选择模板
        dialogTemplate: false,
        templateTable: {
          data: [],
          page: 1,
          pageSize: 10,
          total: ''
        },
//      关联选择----公共弹窗
        commonLoading: false,
        dialogCommon: false,
        formCommon: {
          ID: '',
          name: ''
        },
        TableCommon: {
          data: [],
          page: 1,
          pageSize: 10,
          total: ''
        },
//      关联广告
        dialogAdvert: false,
        TableAdvert: {
          data: [],
          page: 1,
          pageSize: 10,
          total: ''
        },
//      广告详情
        detailDialog: false,
        titleType: 1, // 规则类型 不需要传给后台 主要做针对选择的模板做做规则区分 0 代表品牌 1 代表商品
        modelType: 1, // 规则类型 不需要传给后台 主要做针对选择的模板做做规则区分 0 代表品牌 1 代表商品
        titleName: '', // 标题名称
        canvasDialogWidth: '', // canvas弹框宽度
        canvasTitle: '', // canvas 弹框标题
        canvasDialog: false, // canvas 弹框变量
        canvasData: {}, // canvas 传给组件的值
        canvasIndex: '', // 点击预览选中的是哪一行
        imgWidth: '100', // 上传后图片的宽度
        imgHeight: '50', // 上传后图片的高度
        showCreate: true // 是否显示确认按钮
      }
    },
    methods: {
      preview (title, scope) { // 预览
        var self = this
        var obj = {}
        this.canvasIndex = scope.$index
        if (scope.row.image) { // 如果图片存在 就预览
          obj.image = this.imgHost + '/' + scope.row.image
          obj.imgId = 'imgId'
          this.moduleTable.data[this.canvasIndex].canvasData = obj
          this.canvasDialog = true
          this.showCreate = false
          // this.moduleTable.data[this.canvasIndex].canvasData = this.canvasData
          console.log(this.moduleTable.data[this.canvasIndex].canvasData)
          setTimeout(() => {
            self.$refs.canvas.matchRules(this.moduleTable.data[this.canvasIndex].canvasData)
          }, 0)
          setTimeout(() => {
            self.canvasTitle = self.$refs.canvas.name + (this.modelType === 1 ? '品牌' : '品类')
            self.canvasDialogWidth = self.$refs.canvas ? self.$refs.canvas.width + 40 + 'px' : ''
          }, 100)
        } else { // 生成图片
          this.showCreate = true
          if (this.templateForm.mark === 'HMC052') { // 判断是不是标题
            if (this.titleName === '') {
              this.$message({
                showClose: true,
                message: '请填写标题',
                type: 'error'
              })
            } else {
              console.log(this.$refs)
              this.canvasDialog = true
              setTimeout(() => {
                self.$refs.canvas.imgSrc = ''
                obj.mark = self.templateForm.mark
                obj.index = this.canvasIndex
                obj.title1 = [this.titleName]
                obj.titleType = self.titleType
                obj.modelType = self.modelType
                self.moduleTable.data[self.canvasIndex].canvasData = obj
                // self.moduleTable.data[self.canvasIndex].canvasData = self.canvasData
                self.$refs.canvas.matchRules(self.moduleTable.data[self.canvasIndex].canvasData)
                self.canvasTitle = self.$refs.canvas.name + ' - ' + (this.titleType === 1 ? '厂商周' : '品牌/品类')
                self.canvasDialogWidth = self.$refs.canvas ? self.$refs.canvas.width + 40 + 'px' : ''
                console.log(self.$refs.canvas)
                console.log(this.canvasDialogWidth)
              }, 0)
            }
          } else {
            if (!scope.row.isAssociated) {
              this.$message({
                showClose: true,
                message: '请先关联相关活动',
                type: 'error'
              })
            } else {
              if (this.moduleTable.data[this.canvasIndex].canvasData.img.split('huimin100.cn/')[1] === '') {
                this.$message({
                  showClose: true,
                  message: '所关联的图片为空, 请上传图片后再预览',
                  type: 'error'
                })
              } else if (this.moduleTable.data[this.canvasIndex].canvasData.title[0] === '') {
                this.$message({
                  showClose: true,
                  message: '所关联的主广告语为空, 请填写主广告语后再预览',
                  type: 'error'
                })
              } else if (this.moduleTable.data[this.canvasIndex].canvasData.title[1] === '') {
                this.$message({
                  showClose: true,
                  message: '所关联的副广告语为空, 请填写副广告语后再预览',
                  type: 'error'
                })
              } else {
                console.log(scope)
                console.log(this.$refs)
                this.canvasIndex = scope.$index
                this.canvasDialog = true
                setTimeout(() => {
                  self.$refs.canvas.imgSrc = ''
                  self.moduleTable.data[self.canvasIndex].canvasData.mark = self.templateForm.mark
                  self.moduleTable.data[self.canvasIndex].canvasData.titleType = self.titleType
                  self.moduleTable.data[self.canvasIndex].canvasData.modelType = self.modelType
                  self.moduleTable.data[self.canvasIndex].canvasData.index = this.canvasIndex
                  // self.moduleTable.data[self.canvasIndex].canvasData = self.canvasData
                  console.log(self.moduleTable.data[self.canvasIndex].canvasData)
                  self.$refs.canvas.matchRules(self.moduleTable.data[self.canvasIndex].canvasData)
                  self.canvasTitle = self.$refs.canvas.name + ' - ' + (this.modelType === 1 ? '品牌' : '品类')
                  self.canvasDialogWidth = self.$refs.canvas ? self.$refs.canvas.width + 40 + 'px' : ''
                  console.log(self.$refs.canvas)
                  console.log(this.canvasDialogWidth)
                }, 0)
              }
            }
          }
        }
      },
      createdImg () { // 生成图片
        // console.log(this.$refs.canvas.imgSrc)
        // this.moduleTable.data
        // console.log(this.$refs.canvas.imgSrc.split(',')[1])
        getInfo.upLoadBase64({image: this.$refs.canvas.imgSrc.split(',')[1]}, res => {
          console.log(res)
          if (res.message === 'ok') {
            // this.moduleTable.data[this.canvasIndex].image = res.content.imageUrl
            if (res.content.imageUrl.indexOf('huimin100.cn/') !== -1) {
              res.content.imageUrl = res.content.imageUrl.split('huimin100.cn/')[1]
              console.log(this.moduleTable.data[this.canvasIndex])
              this.moduleTable.data[this.canvasIndex].image = res.content.imageUrl
              // a.isPreview = true
              Vue.set(this.moduleTable.data, this.canvasIndex, this.moduleTable.data[this.canvasIndex])
              console.log(this.moduleTable.data)
            }
          } else {
            this.$message({
              showClose: true,
              message: '上传图片失败',
              type: 'error'
            })
          }
        })
        this.canvasDialog = false
      },
      getCanvasData (row, index) {
        console.log(row)
        console.log(this.canvasData)
        console.log(this.name)
        var obj = {}
        if (this.name === '内容') {
          obj.img = row.advertImage || row.productImage
          obj.img = this.imgHost + '/' + obj.img
          // this.canvasData.imgGroup = 'hmresnon.huimin100.cn/' + row.advertImage
          obj.title = [row.advertMain, row.advertVice]
        } else if (this.name === '满减' || this.name === '满赠') {
          obj.img = row.ad_pic || row.product_list.main_product[0].product_img
          obj.img = this.imgHost + '/' + obj.img
          // this.canvasData.img = 'http://img1.imgtn.bdimg.com/it/u=1193474556,1223904415&fm=27&gp=0.jpg'
          obj.title = [row.ad_words, row.sub_ad_words]
        }
        this.moduleTable.data[this.nowIndex].canvasData = obj
        // Vue.set(this.moduleTable.data, this.nowIndex, this.moduleTable.data[this.nowIndex])
        console.log(this.moduleTable.data)
      },
      titleNameChange (val) {
        var reg = new RegExp('^[\u2E80-\u9FFF]+$', 'g')
        if (!reg.test(val)) {
          this.titleName = ''
          this.$message({
            showClose: true,
            message: '标题只能包含文字',
            type: 'error'
          })
          console.log(this.canvasData)
        }
        console.log(this.moduleTable.data)
        delete this.moduleTable.data[0].image
        Vue.set(this.moduleTable.data, 0, this.moduleTable.data[0])
        this.canvasData.title1 = [this.titleName]
      },
      viewChange (val) {
        if (!this.data) {
          this.templateForm.src = ''
          this.templateForm.mark = ''
          this.templateForm.name = ''
          this.moduleTable.data = []
          this.isAddModule = false
          this.sort = ''
        }
      }, // 页面类型变化时清数据
      timeChange (val) {
        this.lineForm.onlineTime = val
      }, // 时间变化
      change (val) {
        if (this.lineForm.onlineMode === '1') {
          this.lineForm.onlineTime = ''
        }
      },     // 上线类型变化清除时间
      handleAvatarSuccess (res, file, scope, index) {
        console.log(file)
        scope.row.image = res.content.imageUrl
        scope.row.isPreview = false
        Vue.set(this.moduleTable.data, index, scope.row)
      }, // 上传
      checkTemplate () {
        if (this.infoForm.view === '') {
          this.$message({
            showClose: true,
            message: '请选择页面类型',
            type: 'error'
          })
          return false
        }
        const _data = {
          pageId: this.infoForm.view,
          page: this.templateTable.page,
          pageSize: 10
        }
        column.modules.temList(_data, res => {
          if (res.message === 'ok') {
            this.templateTable.data = res.content.content
            this.templateTable.page = res.content.page
            this.templateTable.total = res.content.count
            this.dialogTemplate = true
          } else {
            this.$message({
              showClose: true,
              type: 'error',
              message: '选择模板失败'
            })
          }
        })
      },            // 选择模板
      handleCurrentChange_T (val) {
        this.templateTable.page = val
        this.checkTemplate()
      }, // 模板分页
      add (index, row) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '添加成功!'
        })
        // 赋值模板信息
        this.canvasData = {}
        this.dialogTemplate = false
        this.templateForm.src = row.image
        this.templateForm.mark = row.markId
        this.templateForm.name = row.name
        this.templateForm.id = row.id
        // 请求详情
        column.template.detail({id: row.id}, (res) => {
          console.log(res, '模板详情')
          if (res.message === 'ok') {
            if (res.content.contentNum === 0) {
              this.isAddModule = true
              this.addId = res.content.id
            } else {
              this.isAddModule = false
            }
            var bbb = JSON.parse(JSON.stringify(res.content.newTemplateContents).replace(/disPlayId/g, 'displayId'))
            this.moduleTable.data = bbb
          } else {
            this.$message({
              showClose: true,
              message: '查看模板详情失败',
              type: 'error'
            })
          }
        })
      },            // 添加模板
      addModule () {
        if (this.sort) {
          ++this.sort
        } else {
          this.sort = 1
        }
        const newModule = {
          comment: '',
          displayId: 1,
          contentType: '',
          id: '',
          productNum: 0,
          sortId: this.sort,
          templateId: this.addId
        }
        this.moduleTable.data.push(newModule)
      },                // 模块数量为0时动态添加模块
      // ----------------------关联广告---------------------------
      releAdvert (row, index) {
        this.nowIndex2 = index
        const queryData = {
          branchId: this.branchId === 1 ? this.infoForm.branchId : this.branchId,
          pageId: this.infoForm.view,
          page: 1,
          pageSize: 10,
          markid: 'HMC038'  // 写死-页面广告-栏目广告
        }
        console.log(queryData)
        column.modules.ggList(queryData, (res) => {
          console.log(res, '关联广告的分页')
          if (res.message === 'ok') {
            this.TableAdvert.data = res.content.content
            this.TableAdvert.total = res.content.count
            this.dialogAdvert = true
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },     // 关联广告
      handleCurrentChange_A (val) {
        this.TableAdvert.page = val
        this.releAdvert()
      }, // 关联广告分页
      add_A (index, row, event) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '添加成功!'
        })
        this.dialogAdvert = false
        this.moduleTable.data[this.nowIndex2].advertisementId = row.cId
        Vue.set(this.moduleTable.data, this.nowIndex2, this.moduleTable.data[this.nowIndex2])
      },   // 添加广告
      AdvertDetail (index, row) {
        this.nowIndex3 = index
        column.modules.ggDetail({advertId: row.advertisementId}, (res) => {
          console.log(res, '关联广告的详情')
          if (res.message === 'ok') {
            this.ggData = res.content
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
        this.detailDialog = true
      }, // 广告详情
      cancelAdvert () {
        this.detailDialog = false
        this.moduleTable.data[this.nowIndex3].advertisementId = ''
        Vue.set(this.moduleTable.data, this.nowIndex3, this.moduleTable.data[this.nowIndex3])
      }, // 取消关联广告
      // ----------------------公共关联 -------------------------
      handleCommand (command, row, index) {
        this.nowIndex = index
        command === 'neirong' ? this.nowName = 'nrList' : this.nowName = 'hdList'   // 接口设置
        if ((this.isBranch && this.infoForm.branchId === '') || this.infoForm.view === '') {
          this.$message({
            showClose: true,
            message: '请选择分公司和页面类型',
            type: 'error'
          })
          return false
        }
        // 重置公共弹窗
        this.formCommon.ID = ''
        this.formCommon.name = ''
        this.TableCommon.page = 1
        this.TableCommon.data = []
        this.TableCommon.pageSize = 10
        this.TableCommon.total = ''
        // 查询接口设置
        switch (command) {
          case 'neirong':  // 内容
            this.name = '内容'
            this.type = 1
            break
          case 'manjian':  // 满减
            this.name = '满减'
            this.type = 2
            this.hdType = 4
            break
          case 'manzeng':  // 满赠
            this.name = '满赠'
            this.type = 3
            this.hdType = 5
            break
          case 'putongtc':  // 普通套餐
            this.name = '普通套餐'
            this.type = 4
            this.hdType = 1
            break
          case 'xianshiqianggou':  // 限时抢购
            this.name = '限时抢购'
            this.type = 5
            this.hdType = 2
            break
          case 'yijiaN':  // 1+n
            this.name = '1+n套餐'
            this.type = 6
            this.hdType = 3
            break
          case 'jiajiagou':  // 加价购
            this.name = '加价购'
            this.type = 7
            this.hdType = 6
            break
          case 'zhekou':  // 单品折扣
            this.name = '单品折扣'
            this.type = 8
            this.hdType = 7
            break
        }
        if (command === 'neirong' || command === 'manjian' || command === 'manzeng' || command === 'jiajiagou') {
          this.dialogCommon = true
        } else {
          this.moduleTable.data[this.nowIndex].contentId = ''
          this.moduleTable.data[this.nowIndex].name = ''
          this.moduleTable.data[this.nowIndex].remark = ''
          this.moduleTable.data[this.nowIndex].contentModeName = ''
          this.moduleTable.data[this.nowIndex].contentMode = ''
//          this.moduleTable.data[this.nowIndex].contentName = this.name
          this.moduleTable.data[this.nowIndex].contentType = this.type
//          this.moduleTable.data[this.nowIndex].advertisementId = ''
          Vue.set(this.moduleTable.data, this.nowIndex, this.moduleTable.data[this.nowIndex])
        }
      }, // 关联选择
      ListCommon () {
        this.commonLoading = true
        var queryData = {}
        if (this.name === '内容') {
          queryData = {
            branchId: this.branchId === 1 ? this.infoForm.branchId : this.branchId,
            id: this.formCommon.ID,
            name: this.formCommon.name,
            page: this.TableCommon.page,
            pageSize: this.TableCommon.pageSize,
            state: 20,
            isGL: 1
          }
        } else {
          queryData = {
            limit_branch_id: this.branchId === 1 ? this.infoForm.branchId : this.branchId,
            promotion_id: this.formCommon.ID,
            promotion_name: this.formCommon.name,
            promotion_type: this.hdType,
            page: this.TableCommon.page,
            pageSize: this.TableCommon.pageSize,
            check_status: '5,6', // 关联进行中，未开始
            sortType: 2,
            orderBy: 2
          }
        }
        column.modules[this.nowName](queryData, (res) => {
          console.log('关联', res)
          if (res.message === 'ok') {
            this.commonLoading = false
            if (this.name === '内容') {
              this.TableCommon.data = res.content.content
              this.TableCommon.total = res.content.count
              this.TableCommon.page = res.content.page
//            if (res.content.content !== 'null') {
//              this.contentTable.data.forEach(function (item, index) {
//                item.sign = 'add'
//              })
//            }
            } else {
              if (res.content.count !== 0) {
                res.content.list.forEach((item, index) => {
                  item.name = item.promotion_name
                  item.comment = item.remark
                })
                this.TableCommon.data = res.content.list
                this.TableCommon.total = res.content.count
              }
            }
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },                       // 公共查询
      handleCurrentChange_C (val) {
        this.TableCommon.page = val
        this.ListCommon()
      },         // 公共分页
      add_C (index, row, event) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '添加成功!'
        })
        this.getCanvasData(row, index)
//        if (event.target.innerText === '关 联') {
//          const length = this.contentTable.data.length
//          for (var i = 0; i < length; i++) {
//            if (this.contentTable.data[i].sign === 'cancel') {
//              this.$message({
//                showClose: true,
//                message: '该栏目已关联内容, 请先取消关联',
//                type: 'error'
//              })
//              return false
//            }
//          }
//          row.sign = 'cancel'
        this.dialogCommon = false
        // console.log(this.nowIndex)
        if (row.promotion_id) {
          this.moduleTable.data[this.nowIndex].contentId = row.promotion_id
        } else {
          this.moduleTable.data[this.nowIndex].contentId = row.id
        }
        this.moduleTable.data[this.nowIndex].name = row.name
        this.moduleTable.data[this.nowIndex].remark = row.comment
        this.moduleTable.data[this.nowIndex].contentModeName = row.contentModeName
        this.moduleTable.data[this.nowIndex].contentMode = row.contentMode
//        this.moduleTable.data[this.nowIndex].contentName = this.name
        this.moduleTable.data[this.nowIndex].contentType = this.type
        this.moduleTable.data[this.nowIndex].isAssociated = true
        Vue.set(this.moduleTable.data, this.nowIndex, this.moduleTable.data[this.nowIndex])
//        } else {
//          row.sign = 'add'
//          this.nowRow.contentId = ''
//          this.nowRow.name = ''
//          this.nowRow.remark = ''
//          this.nowRow.displayId = ''
//          Vue.set(this.contentTable.data, index, row)
//        }
      },           // 关联
      releCancel (index, row) {
        row.contentId = ''
        row.name = ''
        row.remark = ''
        row.contentModeName = ''
        row.contentMode = ''
//        row.contentName = ''
        row.contentType = ''
        delete row.image
        delete this.canvasData.image
        row.isAssociated = false
        Vue.set(this.moduleTable.data, index, row)
      },             // 取消关联
      // --------------------------------------------------------
      cancel () {
        if (!this.data) {
          this.$store.dispatch('delTab', {id: 'module_add'})
        } else {
          this.$store.dispatch('delTab', {id: 'module_edit'})
        }
      },  // 取消
      submit (event) {
        if (this.branchId === 1) {
          if (this.infoForm.branchId === '') {
            this.$message({
              showClose: true,
              message: '请选择分公司',
              type: 'error'
            })
            return false
          }
        }
        if (this.infoForm.view === '') {
          this.$message({
            showClose: true,
            message: '请选择页面类型',
            type: 'error'
          })
          return false
        }
        if (this.infoForm.name === '') {
          this.$message({
            showClose: true,
            message: '请填写模块名称',
            type: 'error'
          })
          return false
        }
        if (this.lineForm.onlineMode === '2') {
          if (this.lineForm.onlineTime === '') {
            this.$message({
              showClose: true,
              message: '请选择定时时间',
              type: 'error'
            })
            return false
          } else if (new Date(this.lineForm.onlineTime).getTime() < new Date().getTime()) {
            this.$message({
              showClose: true,
              message: '定时时间应晚于当前时间',
              type: 'error'
            })
            this.lineForm.onlineTime = ''
            return false
          }
        }
        if (this.templateForm.mark === '') {
          this.$message({
            showClose: true,
            message: '请选择模板',
            type: 'error'
          })
          return false
        }
        for (var i = 0; i < this.moduleTable.data.length; i++) {
          if (this.moduleTable.data[i].displayId === 1 && !this.moduleTable.data[i].image) {
            this.$message({
              showClose: true,
              message: '请上传图片',
              type: 'error'
            })
            return false
          }
//          if (event.target.innerText === '提交') {
//            if (!this.moduleTable.data[i].contentName) {
//              this.$message({
//                showClose: true,
//                message: '请先关联活动后再提交',
//                type: 'error'
//              })
//              return false
//            }
//          }
        }
        if (!this.data) {
          const _data = {
            branchId: this.branchId === 1 ? this.infoForm.branchId : this.branchId,
            pageId: this.infoForm.view,
            createUser: this.userName,
            name: this.infoForm.name,
            userType: this.lineForm.client.join(','),
            onlineMode: this.lineForm.onlineMode,
            onlineComment: this.lineForm.onlineComment,
            onlineTime: this.lineForm.onlineTime,
            templateMarkId: this.templateForm.mark,
            templateId: this.templateForm.id,
            newModelContents: this.moduleTable.data,
            state: event.target.innerText === '提交' ? 2 : 1,
            titleType: this.titleType,
            titleName: this.titleName,
            modelType: this.modelType
          }
          column.modules.create(_data, res => {
            if (res.message === 'ok') {
              this.$message({
                showClose: true,
                message: '创建成功',
                type: 'success'
              })
              this.$store.dispatch('delTab', {id: 'module_add'})
              this.$store.dispatch('moduleState', this.$store.state.updateState.moduleState + 1)
              this.$store.dispatch('moduleCheckState', this.$store.state.updateState.moduleCheckState + 1)
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              })
            }
          })
        } else {
          const _data = {
            id: this.data.id,
            updateUser: this.userName,
            branchId: this.branchId === 1 ? this.infoForm.branchId : this.branchId,
            pageId: this.infoForm.view,
            createUser: this.userName,
            name: this.infoForm.name,
            userType: this.lineForm.client.join(','),
            onlineMode: this.lineForm.onlineMode,
            onlineComment: this.lineForm.onlineComment,
            onlineTime: this.lineForm.onlineTime,
            templateMarkId: this.templateForm.mark,
            templateId: this.templateForm.id,
            newModelContents: this.moduleTable.data,
            state: event.target.innerText === '暂存' ? 20 : this.data.state,
            titleType: this.titleType,
            titleName: this.titleName,
            modelType: this.modelType
          }
          column.modules.edit(_data, res => {
            if (res.message === 'ok') {
              this.$message({
                showClose: true,
                message: '编辑成功',
                type: 'success'
              })
              this.$store.dispatch('delTab', {id: 'module_edit'})
              this.$store.dispatch('moduleState', this.$store.state.updateState.moduleState + 1)
              this.$store.dispatch('moduleCheckState', this.$store.state.updateState.moduleCheckState + 1)
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              })
            }
          })
        }
      }, // 提交
      editInto (id) {
        console.log('编辑进入')
        this.dingshi = false
        column.modules.detail({id: id, type: 2}, (res) => {
          if (res.message === 'ok') {
            res.content.newModelContents.forEach((item, index) => {
              item.advertisementId = item.advertisementId === 0 ? '' : item.advertisementId
              item.contentType = item.contentType === 0 ? '' : item.contentType
            })
            const data = res.content
            console.log(data, '编辑的数据')
            const arr = data.userType.split(',').map(value => {
              return parseInt(value)
            })
            this.infoForm.branchId = data.branchId
            this.infoForm.view = data.pageId
            this.infoForm.name = data.name
            this.lineForm.onlineMode = data.onlineMode.toString()
            this.lineForm.onlineComment = data.onlineComment
            this.lineForm.onlineTime = data.online_time
            this.lineForm.client = arr
            this.templateForm.src = data.newTemplate.image
            this.templateForm.mark = data.newTemplate.markId
            this.templateForm.name = data.newTemplate.name
            this.templateForm.id = data.newTemplate.id
            this.moduleTable.data = data.newModelContents
            this.moduleTable.data.forEach(item => {
              item.isAssociated = true
            })
            this.titleType = data.titleType
            this.titleName = data.titleName
            this.modelType = this.modelType
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      }  // 编辑进入赋值
    },
    computed: {
      orgName: function (state) {
        return this.$store.state.user.info.parOrgName
      },
      orgId: function (state) {
        return this.$store.state.user.info.or_org_id
      },
      branchName: function (state) {
        return this.$store.state.user.info.branchId === 1 ? '总公司' : this.$store.state.user.info.branchName
      },
      branchId: function (state) {
        return this.$store.state.user.info.branchId
      },
      userName: function (state) {
        return this.$store.state.user.info.user_name
      }
    },
    created () {
      this.imgHost = apiHost.imgHost
      this.imgAddress = 'http://' + apiHost.newCms + ':20000' + apiURL.upLoadImage
      getInfo.client({}, (res) => {
        if (res.message === 'ok') {
          this.lineForm.clientList = res.content.content
        }
      })
      column.modules.viewList({}, res => {
        if (res.message === 'ok') {
          this.infoForm.viewList = res.content.allPages
        }
      })
      this.data = this.$store.state.tab.uid
      if (this.data) {
        this.editInto(this.data.id)
        if (this.data.state !== 1) {
          this.isDraft = false
        }
      }
    },
    mounted () {
    }
  }
</script>
<style>
  .pic {
    width: 500px;
    height: 200px;
    background-color: #B7B7B7;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatarCanvas {
    display: block;
    /* min-width: 100px; */
    /* min-height: 100px; */
    max-width: 200px;
    max-height: 200px;
  }
  .menu {
    font-size: 15px;
  }
  .el-dropdown-menu {
    min-width: 85px;
  }
  @font-face {
    font-family: 'dongqingheiti';
    src: url('/static/font/Hiragino Sans GB W6.ttf');
      /* src: url('/static/font/Hiragino Sans GB W3.otf') */
  }
  @font-face {
    font-family: 'weiruanyahei';
    src: url('/static/font/微软雅黑.ttf');
      /* src: url('/static/font/Hiragino Sans GB W3.otf') */
  }
</style>
